<template>
    <div class="login_container">
        <vue-particles
            color="#53a8ff"
            :particleOpacity="0.7"
            :particlesNumber="60"
            shapeType="star"
            :particleSize="4"
            linesColor="#fff"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.4"
            :linesDistance="150"
            :moveSpeed="2"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
            class="lizi"
        ></vue-particles>
        <div class="login_box">
            <div class="all">
                <div class="logo">
                    <img
                        src="@/assets/images/cmpany_logo.png"
                        alt=""
                        srcset=""
                        style="width: 100%"
                    />
                </div>
                <!-- <div class="title">{{ title }}</div> -->
                <!-- 请求表单区 -->
                <el-form
                    ref="loginFormRef"
                    class="login_form"
                    :rules="loginFormRules"
                    :model="loginForm"
                >
                    <!-- 用户名 -->
                    <el-form-item prop="account">
                        <el-input
                            prefix-icon="el-icon-user"
                            v-model="loginForm.account"
                        ></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input
                            type="password"
                            prefix-icon="el-icon-lock"
                            v-model="loginForm.password"
                        ></el-input>
                    </el-form-item>
                    <!-- 按钮区 -->
                    <el-form-item class="btns">
                        <el-button type="primary" @click="subLogin"
                            >登录</el-button
                        >
                        <el-button type="info" @click="resetLoginForm"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>
                <div class="sustain">{{ sustain }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import requestApis from '@/request'
import router from '@/router'
import { mapActions } from 'vuex'
export default {
    name: 'Login',
    data () {
        return {
            title: '后台管理系统',
            sustain: '技术支持:河南龙啸信息科技',
            loginForm: {
                account: 'admin',
                password: '123456'
            },
            loginFormRules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 20, message: '账号长度在2~20位之间', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 40, message: '账号长度在6~40位之间', trigger: 'blur' }
                ]
            }
        }
    },
    mounted () {
        this.setAsynRouter()
    },
    methods: {
        ...mapActions([
            'setToken'
        ]),
        subLogin () {
            this.$refs.loginFormRef.validate((valid) => {
                if (!valid) {
                    return false
                }
                requestApis.login(this.loginForm).then(res => {
                    if (res.meta.code === 1) {
                        this.$message({
                            message: res.meta.msg,
                            type: 'success'
                        })
                        this.setToken(res.data)

                        this.$router.push('/home')
                    } else {
                        this.$message({
                            message: res.meta.msg,
                            type: 'warning'
                        })
                    }
                }).catch(error => {
                    console.log(error)
                })
            })
        },
        setAsynRouter () {
            requestApis.getRouterMenu().then(res => {
                if (res.meta.code === 1) {
                    console.log(res.data)
                    sessionStorage.setItem('asynRouter', JSON.stringify(res.data))
                    res.data.forEach(item => {
                        router.addRoute('Home', {
                            path: '/' + item.component_path,
                            name: item.name,
                            component: () => import(/* webpackChunkName: "about" */ '@/views/' + item.component_path + '.vue')
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        resetLoginForm () {
            this.$refs.loginFormRef.resetFields()
        }
    }
}
</script>
<style lang="stylus" scoped>
.login_container {
    background-image: url('../assets/images/login-bg.jpg');
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;

    .login_box {
        position: absolute;
        top: 25%;
        left: 50%;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.6);
        width: 400px;
        height: 350px;
        border-radius: 15px;

        .logo {
            width: 100%;
            margin-bottom: 50px;
            position: absolute;
            margin-left: -40px;
            overflow: hidden;
            margin-top: -20px;
            opacity: 0.9;
        }

        .title {
            width: 73%;
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
            position: absolute;
        }

        .all {
            width: 80%;
            height: 100%;
            margin: 0px auto;
            overflow: hidden;

            .avatar_box {
                width: 160px;
                height: 160px;
                background-color: rgba(220, 220, 220, 1);
                padding: 10px;
                border-radius: 50%;
                overflow: hidden;
                box-shadow: 0 0 15px #bbb;
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50% - 10px);
                z-index: 99;

                .avatar {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .login_form {
                position: absolute;
                bottom: 20px;
                left: 10%;
                width: 80%;
                box-sizing: border-box;
                padding: 0 20px;

                .el-button {
                    float: right;
                    margin-left: 20px;
                }
            }
        }

        .sustain {
            position: absolute;
            bottom: 10px;
            left: 10%;
            width: 76%;
            text-align: right;
        }
    }
}
</style>
